/* eslint-disable no-undef */
<template>
	<div>
		<form action="http://localhost:5000/api/fruitList" method="post" @submit.prevent="create">
			<input type="text" v-model="fruit" />
			<button>添加</button>
		</form>
		<ul>
			<li v-for="(fruit, i) in fruitList" :key="i">
				<span>{{ fruit }}</span>
				<button @click="deleteFruit(i)" class="btn btn-danger btn-xs">删除</button>
				&nbsp;
				<button @click="showUpdateModel(i)" type="button" class="btn btn-primary btn-xs">更新</button>
			</li>
		</ul>
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title">更新数据</h4>
					</div>
					<div class="modal-body">
						<input type="text" v-model="updateFruit" />
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" @click="update(updateIndex)">确认</button>
						<button type="button" class="btn btn-default" @click="hideUpdateModal">取消</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
		<!-- /.modal -->
	</div>
</template>

<script>
// import STable from "../table/STable";
// import STableColumn from "../table/STableColumn";

export default {
	// components: {
	//   STable,
	//   STableColumn,
	// },
	data() {
		return {
			fruitList: [], // 初始的数据
			fruit: "", // 添加的数据
			updateIndex: -1, // 被更新元素的索引，默认为-1
			updateFruit: "", // 更新数据的初始值
		};
	},
	// 初始化数据
	created() {
		this.getData();
		console.log(this.fruitList);
	},
	methods: {
		// 查询数据
		getData() {
			this.$axios({
				method: "get",
				url: "http://localhost:5000/api/fruitList",
			}).then((res) => {
				console.log(res.data);
				this.fruitList = res.data;
			});
		},
		// 添加数据
		create() {
			this.$axios({
				method: "post",
				url: "http://localhost:5000/api/fruitList",
				data: { fruit: this.fruit },
			}).then((res) => {
				if (res.data.errno == 0) {
					this.fruit = "";
					this.getData();
				} else {
					alert("添加失败");
				}
			});
		},
		// 显示模态框
		showUpdateModel(i) {
			this.updateIndex = i;
			this.updateFruit = this.fruitList[i];
			// eslint-disable-next-line no-undef
			$("#myModal").modal("show");
		},
		// 更新数据
		update(i) {
			this.$axios({
				method: "put",
				url: `http://localhost:5000/api/fruitList/${i}`,
				data: { updateFruit: this.updateFruit },
			}).then((res) => {
				if (res.data.errno == 0) {
					// eslint-disable-next-line no-undef
					$("#myModal").modal("hide");
					this.getData();
				} else {
					alert("添加失败");
				}
			});
		},
		// 删除数据
		deleteFruit(i) {
			this.$axios({
				method: "delete",
				url: `http://localhost:5000/api/fruitList/${i}`,
			}).then((res) => {
				if (res.data.errno == 0) {
					this.getData();
				} else {
					alert("添加失败");
				}
			});
		},
		// 隐藏模态框
		hideUpdateModal() {
			// eslint-disable-next-line no-undef
			$("#myModal").modal("hide");
		},
	},
};
</script>

<style lang="scss" scoped></style>
